<template>

	<fui-row class="navpath">
		<fui-col :span="4" class="all">
			<fui-text :color="len?'#0052d9':'rgba(0,0,0,0.9)' " @click="onAll" text="全部"></fui-text>
			<fui-icon v-if="len" name="arrowright" size="36rpx" color="#a3a3a3"></fui-icon>
		</fui-col>
		<fui-col :span="20" class="nav">
			<template :key="index" v-for="(item,index) in pathData">
				<fui-text class="path-item" :color="len-1 != index ? '#0052d9':'rgba(0,0,0,0.9)' "
					@click="onPathItem(item.value,index)" :text="item.nodeName">
				</fui-text>
				<fui-icon name="arrowright" size="36rpx" color="#a3a3a3" v-if="index !== len-1"></fui-icon>
			</template>


		</fui-col>
	</fui-row>

</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia'
	import {
		defineComponent
	} from "vue"
	import {
		useDeptStore
	} from '../../../store/modules/dept'
	export default defineComponent({
		props: {
			pathData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			}
		},
		computed: {
			// ...mapState(useDeptStore, ['pathData']),
			len() {
				return this.pathData.length
			}
		},
		emits: ['pathItem', 'all'],
		methods: {


			onPathItem(value, index) {
				this.$emit('pathItem', {
					value,
					index
				})
			},
			onAll() {
				this.$emit('all', )
			},
			// ...mapActions(useDeptStore, ['onPathItem', 'onAll']),



		}
	})
</script>

<style lang="scss" scoped>
	/* common/components/pathNav/pathNav.wxss */

	.navpath {
		font-size: 32rpx;
		font-weight: 400;
		margin-top: 32rpx !important;

		.all {
			display: flex;
			align-items: center;
			color: rgba(0, 0, 0, 0.9);
		}
	}

	.path {
		overflow-x: auto;

		&-item {
			// display: flex;
			// align-items: center;
			// overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
		}
	}

	.actived {
		color: #0052d9;
	}

	.nav {
		overflow: auto;
		white-space: nowrap;
		display: flex;
		align-items: center;

		&::after {
			content: "";
			display: table;
			clear: both;
		}
	}
</style>